<template>
  <div class="subComment" v-show="comments.length">
    <h3 class="title">{{title}}</h3>
    <div class="commentItem" v-for="v  in comments" :key="v.commentId">
      <img class="creatorAvatar" :src="v.user.avatarUrl+`?param=100y100`" alt="">
      <div class="main">
        <div class="content">
          <span class="nickname">{{v.user.nickname}}&nbsp;</span>
          <span>{{v.content}}</span>
        </div>
        <div class="replied">
          <div class="repliedItem" v-for="(v2 ,i2) in v.beReplied" :key="i2">
            <span class="repliedName">{{v2.user.nickname}}&nbsp;</span>
            <span>{{v2.content}}</span>
          </div>
        </div>
        <div class="bottom">
          <div class="createdTime">
            {{v.time}}
          </div>
          <div class="btns">
            <span><i class="iconfont icon-good"></i>{{v.likedCount}}</span>
            <span> <i class="iconfont icon-zhuanfa"></i></span>
            <span @click="floorComment(v.commentId , v.user.nickname)"><i class="iconfont icon-pinglun"></i></span>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: 'subComment',
  props: {
    title: {
      type: String,
      default: ''
    },
    comments: {
      type: Array,
      default() {
        return []
      }
    }
  },
  setup(p, { emit }) {
    const floorComment = (floorId, nickname) => {
      emit('floorComment', {
        floorId,
        nickname
      })
    }
    return { floorComment }
  }
}
</script>

<style scoped>
.subComment {
  width: 100%;
  font-size: 12px;
}
.title {
  width: 100%;
  margin: 10px 0;
  color: #333;
}
.commentItem {
  display: flex;
  margin: 5px 0;
  padding: 10px 0 20px;
  border-bottom: 1px solid #ddd;
}
.creatorAvatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  margin-right: 10px;
}
.main {
  width: calc(100% - 50px);
}
.nickname {
  color: var(--blue);
}
.repliedItem {
  margin-top: 10px;
  padding: 5px 0;
  line-height: 20px;
  background-color: var(--gray);
}
.repliedName {
  color: var(--blue);
}
.btns {
  display: flex;
  align-items: center;
}
.btns i {
  margin-right: 2px;
}
.btns span {
  display: flex;
  align-items: center;
  margin-right: 8px;
}
.bottom {
  padding-top: 13px;
  color: rgb(172, 172, 172);
  display: flex;
  justify-content: space-between;
}
</style>